<{extend name="base" /}>
    <{block name="body" }>
        <div class="layui-body ">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <ul class="layui-tab-title">
                        <li class="">
                            <a href="<{:url('admin/sogou/index')}>">已添加列表</a>
                        </li>
                        <li>
                            <a href="<{:url('admin/sogou/create',['style_id'=>1])}>">样式一</a>
                        </li>
                        <li>
                            <a href="<{:url('admin/sogou/create',['style_id'=>2])}>">样式二</a>
                        </li>
                        <li class="layui-this">
                            <a>样式三</a>
                        </li>
                        <li>
                            <a href="<{:url('admin/sogou/create',['style_id'=>4])}>">样式四</a>
                        </li>
                    </ul>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" id="app">
                        <div class="left">
                            <form class="layui-form" method="post" action="<{:url('admin/sogou/save')}>">
                                <input type="hidden" name="style" value="3">
                                <{php}>
                                if(request()->action() == 'edit'){
                                    echo '<input type="hidden" name="type" value="edit">';
                                    echo '<input type="hidden" name="id" value="'.request()->get('id').'">';
                                }
                                <{/php}>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">标题</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[title]" lay-verify="required" v-model='Btitle' placeholder="{用此符号可飘红，支持多个} 必须成对书写" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">描述</label>
                                    <div class="layui-input-block">
                                        <textarea name="content[desc]" lay-verify="required" v-model='Bdesc' placeholder="{用此符号可飘红，支持多个} 必须成对书写"
                                            class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">标题链接</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[url]" v-model="Burl" lay-verify="required|url" placeholder="例如：http://baidu.com" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[tel]" v-model="tel" lay-verify="required" placeholder="例如：010-8888888" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">网址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[host]" v-model="host" lay-verify="required" placeholder="例如：baidu.com" class="layui-input">
                                    </div>
                                </div>



                                <div v-for="(item,index) in items">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" v-html="item.stitle">问题一</label>
                                        <div class="layui-input-block">
                                            <input type="text" :name="item.tname" v-model="item.title" lay-verify="required" placeholder="{用此符号可飘红，支持多个} 必须成对书写"
                                                class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" v-html="item.slx">问题一分类</label>
                                        <div class="layui-input-block">
                                            <input type="text" :name="item.tlx" v-model="item.lx"  lay-verify="required" placeholder="介绍"
                                                class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" v-html="item.surl">问题一链接</label>
                                        <div class="layui-input-block">
                                            <input type="text" :name="item.turl" v-model="item.url" lay-verify="required|url" placeholder="例如：http://baidu.com"
                                                class="layui-input">
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        <button type="reset" class="layui-btn layui-btn-normal" @click="addItem" >添加一组小标题</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="right" id="sogou-search">
                            <link rel="stylesheet" href="/sogou/css/style.css" />
                            <div class="ad_result">
                                <div class="bizParcel biz-QA-list171220">
                                    <h3 class="biz-tit">
                                        <a class="bizResultLink" :href="Burl" v-html="Ctitle"></a>
                                    </h3>
                                    <a :href="Burl" class="biz-img-flex ">
                                        <div class="biz-img-layout hidden"></div>
                                        <div class="biz-text-layout">
                                            <p v-html="Cdesc"></p>
                                        </div>
                                    </a>
                                    <div class="biz-QA-list">
                                        <ul>
                                            <li v-for="item in items">
                                                <a :href="item.url" class="biz-clamp1" v-html="comTitle(item.lx,item.title)"></a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="citeurl">
                                        <div class="biz-urlbtn">
                                            <a :href="Ctel" class="biz-icon-text">
                                                <span class="biz-gap-left biz-QA-tag">拨打电话</span>
                                            </a>
                                        </div>
                                        {{Chost}}
                                        <span class="biz-exp_tip">广告</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<{/block}>
<{block name="script" }>
                <style type="text/css">
                    .left,
                    .right {
                        float: left;
                    }

                    .left {
                        width: 60%;
                    }

                    .right {
                        height: 550px;
                        margin-left: 60px;
                        width: 300px;
                        border: 2px solid #ccc;
                        border-radius: 20px;
                        padding: 20px;
                        background: #f1f1f1;
                        box-shadow: 1px 2px #eeeeee5c;
                        overflow-y: scroll;
                    }

                    .right::-webkit-scrollbar {
                        display: none;
                    }
                </style>
                <script src="/static/js/vue.js"></script>
                <script type="text/javascript">
                    var vue = new Vue({
                        el: "#app",
                        data: {
                            Btitle: '',
                            Bdesc: '',
                            Burl:'',
                            host:'',
                            tel:'',
                            itemsIndex:0,
                            items:[
                                {
                                    stitle:'问题一',
                                    slx:'问题一分类',
                                    surl:'问题一链接',
                                    tname:'content[data][0][title]',
                                    tlx:'content[data][0][lx]',
                                    turl:'content[data][0][url]',
                                    title:'',
                                    lx:'',
                                    url:''
                                }
                            ]
                        },
                        computed: {
                            Ctitle: function () {
                                if (this.Btitle == '') {
                                    return '无痛做不影响以后怀孕 ..';
                                }
                                return this.Btitle.replace(/{/g, '<em>').replace(/}/g, '</em>');
                            },
                            Cdesc:function(){
                                if (this.Bdesc == '') {
                                    return '不影响以后怀孕不影响以后怀孕不影响以后怀孕不影响以后怀孕不影响以后怀孕';
                                }
                                return this.Bdesc.replace(/{/g, '<em>').replace(/}/g, '</em>');
                            },
                            Chost:function(){
                                if (this.host == '') {
                                    return 'm.baidu.com';
                                }
                                return this.host;
                            },
                            Ctel:function(){
                                if (this.tel == '') {
                                    return 'tel:010-888888';
                                }
                                return 'tel:'+this.tel;
                            }
                        },
                        methods:{
                            addItem:function(){
                                var cnIndex = ['一','二','三','四','五','六','七','八','九','十'];
                                this.itemsIndex++;
                                if (this.itemsIndex > 4) {
                                    layer.msg('最多添加五条');
                                    return ;
                                }
                                var cnS = cnIndex[this.itemsIndex];
                                var itemIndex = this.itemsIndex;
                                this.items.push({
                                    stitle:'问题'+ cnS,
                                    slx:'问题'+cnS+'分类',
                                    surl:'问题'+cnS+'链接',
                                    tname:'content[data]['+itemIndex+'][title]',
                                    tlx:'content[data]['+itemIndex+'][lx]',
                                    turl:'content[data]['+itemIndex+'][url]',
                                    title:'',
                                    lx:'',
                                    url:''
                                });
                            },
                            comTitle:function(str1,str2){
                                if (str1 != '') {
                                    str2 = str2.replace(/{/g, '<em>').replace(/}/g, '</em>');
                                }else{
                                    str2 = '保宫与的区别?';
                                }
                                
                                if (str1 != '') {
                                    str1 = '<span class="biz-QA-tag">'+str1+'</span>';
                                }else{
                                    str1 = '<span class="biz-QA-tag">介绍</span>';
                                }

                                return str1+str2;
                            }
                        }
                    });

                    <{php}>
                        if(request()->action() == 'edit'){

                            echo "vue.Btitle = '".$data['content']['title']."';";
                            echo "vue.Burl = '".$data['content']['url']."';";
                            echo "vue.Bdesc = '".$data['content']['desc']."';";
                            echo "vue.host = '".$data['content']['host']."';";
                            echo "vue.tel = '".$data['content']['tel']."';";
                            echo "vue.itemsIndex = ".(count($data['content']['data'])-1).";";

                            $items = to_js_array_obj($data['content']['data']);
                            
                            echo "vue.items = ".$items.";";
                            
                        }
                    <{/php}>
                </script>
<{/block}>